<!-- 专题组件 -->
<template>
    <view>
        <!-- 专题布局 -->
        <view class="box-subject" v-if="!isMore" @click="onDetail">
            <image :src="data.picurl" mode="aspectFill"></image>
            <!-- 专题更新时间布局 -->
            <view class="box-subject-date box-position-absolute-top-left">{{difference}}更新</view>
            <!-- 专题标题布局 -->
            <view class="box-subject-title box-flex-center box-position-absolute-bottom-left">{{data.name}}</view>
        </view>
        <!-- 更多布局 -->
        <view class="box-subject box-more" v-else @click="onMore">
            <image src="../../common/image/更多.jpg" mode="aspectFill"></image>
            <!-- 更多标题布局 -->
            <view class="box-subject-title box-flex-center box-position-absolute-top-left">
                <uni-icons type="more-filled" size="34" color="rgb(255, 255, 255)"></uni-icons>
                <view>更多</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    //导入
    import { computed } from "vue";
    import { formatTimeDifference } from "@/utils/date.ts";
    import { navigateTo, reLaunch } from "@/utils/uni-api.ts";
    import { url_subject, url_subject_detail } from "@/utils/url.ts";

    //参数
    //接收props传参
    let { isMore, data } = defineProps({
        isMore: { type: Boolean, default: false },
        data: {
            type: Object,
            default: {
                name: "默认名称",
                picurl: "../../common/image/专题精选.jpg",
                updateTime: Date.now()
            }
        }
    });
    let difference = computed(() => formatTimeDifference(data.updateTime));

    //内部事件
    //点击专题
    function onDetail() {
        navigateTo({ url: url_subject_detail + "?id=" + data._id + "&name=" + data.name });
    };
    //点击更多
    function onMore() {
        reLaunch({ url: url_subject });
    };
</script>

<style lang="scss" scoped>
    @import "@/common/css/common.css";

    .box-subject {
        height: 340rpx;
        border-radius: 10rpx;
        overflow: hidden;
        position: relative;

        image {
            width: 100%;
            height: 100%;
        }

        .box-subject-title {
            width: 100%;
            height: 50rpx;
            color: $custom-color-white;
            background: $custom-rgba-2;
            backdrop-filter: blur(5rpx);
        }

        .box-subject-date {
            color: $custom-color-white;
            background: $custom-rgba-2;
            backdrop-filter: blur(5rpx);
            padding: 5rpx 10rpx;
        }
    }

    .box-more {
        .box-subject-title {
            width: 100%;
            height: 100%;
            flex-direction: column;
            backdrop-filter: blur(20rpx);
        }
    }
</style>